<template>
  <div class="body">
    <div class="center">
				<div class="txt" style="height: 10px;"></div>
		</div>
    <div class="search">
      <div class="center">
        <div class="main">
          <div class="season">
            <span>季节：</span>
            <a @click="getSceneries">不限</a>
            <a :class="{active:active==1}" @click="seasonId=10,active=1">春季游</a>
            <a :class="{active:active==2}" @click="seasonId=20,active=2">夏季游</a>
            <a :class="{active:active==3}"  @click="seasonId=30,active=3">秋季游</a>
            <a :class="{active:active==4}" @click="seasonId=40,active=4">冬季游</a>
          </div>
          <div class="area">
            <span>区域：</span>
            <a href="#">不限</a>
            <a href="#">定海区</a>
            <a href="#">普陀区</a>
            <a href="#">嵊泗县</a>
            <a href="#">朱家尖</a>
          </div>
        </div>
      </div>
    </div>
    <div class="scenery">
      <div class="center">
        <div class="main">
          <ul v-if="!seasonId">
            <scenery-cell v-for="scenery in sceneries" :key="scenery.scenery_id" :s="scenery"/>
          </ul>
          <ul  v-if="seasonId">
            <scenery-cell v-for="scenery in sceneriesBySeason" :key="scenery.scenery_id" :s="scenery"/>
          </ul>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="center">
      <div class="pages">
        <span :class="{disabled:now==1}" @click="now--">上一页</span>
        <span @click="now=n" :class="{active:now==n}" v-for="n in 4" :key="n">{{n}}</span>
        <span :class="{disabled:now==5}" @click="now++">下一页</span>
      </div>
    </div>
5
    <div class="foot">
			<div class="center">
				<div class="main">
					<div class="box1">
						<p>友情链接</p>
						<div>
							<a href="http://www.zhujiajian.com/">朱家尖旅游网</a>
							<a href="https://www.ctrip.com/">携程旅游网</a>
							<a href="https://www.tuniu.com/">途牛旅游网</a>
						</div>
					</div>
					<div class="box2">
						<img src="img/icon1.png">
						<span>旅游咨询投诉热线：12345</span>
					</div>
					<div class="box3">
						<div>
							<img src="img/weibo.png">
							<p>官方微博</p>
						</div>
						<div>
							<img src="img/weixin.png">
							<p>官方微信</p>
						</div>
						
					</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
import SceneryCell from '@/components/SceneryCell.vue';
export default {
  components: { SceneryCell },
  data() {
    return {
      active:1,//当前点击季节激活样式
      now: 1,  //当前点击页码
      sceneries:[],   //分页查询热门景点的数据
      sceneriesBySeason:[], //接收按照季节获取的景点
      seasonId: null , //季节分类 10-春 20-夏 30-秋 40-冬
    }
  },
  watch: {
    seasonId(){
      this.getSceneriesBySeason()
    },
    now() {
      this.getSceneries()
    }
  },
  mounted () {
    this.getSceneries()
  },
  methods: {
    //按照季节查询热门景点   
    getSceneriesBySeason(){
      this.axios.get(`/scenery/seasonShow?seasonId=${this.seasonId}`).then(res=>{
        console.log('通过季节查询热门景点',res);
        this.sceneriesBySeason = res.data
      })
    },
    getSceneries() {
      this.axios.get(`/scenery/list?pno=${this.now}&pageSize=6`).then(res=>{
        console.log('分页查询热门景点:',res);
        this.sceneries = res.data
      })
    }
  },
};
</script>
<style scoped src="../assets/css/sceneryList.css"></style>
<style lang="scss" scoped>
    .pages {
      display: flex;
      justify-content: flex-end;
      margin: 15px 0 -145px;
      >span {
        margin: 5px;
        padding: 10px 15px;
        border: 1px solid #ddd;
        color: #555;
        border-radius: 5px;
        background-color: #fff;
        user-select: none;
        &:hover {
          border-color: #238BCE;
          color: #238BCE;
          cursor: pointer;   
        } 
        &.active {
          background-color: #238BCE;
          color: #ffff;
        }
        &.disabled {
          pointer-events: none;
          border-color: #bbb;
          color: #bbb;
        }
      }
    }

</style>
